<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_296915_gmmhr5h7t2sgiudi.css"/>
		<link rel="stylesheet" type="text/css" href="../css/swiper-3.4.2.min.css"/>
		<link rel="stylesheet" type="text/css" href="../style/fjol_style.css"/>
		<link rel="stylesheet" type="text/css" href="../style/xol_style.css"/>
	</head>
	<style>
		.swiper-container {
		    width: 100%;
		    height: 200px;
		}
		.swiper-slide{
			overflow: hidden;
		}
	</style>
	<body>
		<header class="mui-bar mui-bar-nav newbgRed">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">商家详情</h1>
		</header>
		<div class="mui-scroll-wrapper" style="top: 45px; bottom: 50px;">
		    <div class="mui-scroll" style="background: #F5F7F7;">
		        <!--这里放置真实显示的DOM内容-->
		        <!--swiper轮播-->
				<div class="swiper-container">
				    <div class="swiper-wrapper" id="swiperWrap">
				    	
				    </div>
				    <!-- 如果需要分页器 -->
				    <div class="swiper-pagination"></div>
				</div>
				<div id="shopDetailbox">
					
				</div>
				
			    <div class="moreCompany bg-white">
			    	<div class="p10 pt10">商家推荐</div>
			    	<ul class="mui-table-view" id="shopgoodList">
			    	    
			    	</ul>
			    </div>
		    </div>
		</div>
		<nav class="mui-bar mui-bar-tab mui-text-right p10" id="nav">
		    <button type="button" class="mui-btn mui-btn-blue" style="border-radius: 20px; padding: 4px 16px;" id="yuyue">服务预约</button>
		</nav>
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-2.1.0.js"></script>
		<script src="../js/swiper-3.4.2.jquery.min.js"></script>
		<script src="../js/jquery.tmpl.min.js"></script>
		<script src="../js/network.js"></script>
		<script src="../js/common.util.js"></script>
		<script src="../js/md5.js"></script>
		<script src="../js/xzx.open.js"></script>
		<!--图片轮播tmpl-->
		<script id="sliderTmpl" type="text/x-jquery-tmpl">
			{{if $item.hasImg()}}
			<div class="swiper-slide">
				<img src="${fullUrl}" width="100%"/>
			</div>
			{{else}}
				<img src="../images/icon_blank.png" width="100%"/>
			{{/if}}
		</script>
		<!--商家详情tmpl-->
		<script id="shopDetailTmpl" type="text/x-jquery-tmpl">
			<div class="p10 pt5 bg-white">
				<span class="f12">${name}</span>
				<div class="flex">
					<p class="m0 flexCell">${area}</p>
					<span class="mui-icon f10" id="shareHouse">
				    	<img src="../imageNew/icon_share@2x.png" height="15"/><em class="newRed vm">分享</em>
				    </span>
				</div>
			</div>
			<ul class="mui-table-view color9 mt10">
		        <li class="mui-table-view-cell" style="padding: 8px 10px;">
		            <a class="mui-navigate-right" id="shopMap">
		                <i class="iconfont icon-address"></i> <span>${address}</span>
		            </a>
		        </li>
		        <li class="mui-table-view-cell" style="padding: 8px 10px; border-bottom: 1px solid #d3d3d4;">
		            <a class="mui-navigate-right" id="telephone">
		                <i class="iconfont icon-phone f15"></i> <span>${telephone}</span>
		            </a>
		        </li>
		    </ul>
		    <div class="companyCon p10 pt5 pb5 mb5 bg-white" style="line-height: normal; font-size: 13px;">
		    	${summary}
		    </div>
		</script>
		
		<!--商家推荐商品列表tmpl-->
		<script id="shopgoodTmpl" type="text/x-jquery-tmpl">
			<li class="mui-table-view-cell mui-media" data-goodsid = "${goodsId}">
    	        <a href="javascript:;">
    	            <!--<img class="mui-media-object mui-pull-left moreCompany-img" src="../imageNew/icon_menu_entrust_pic@2x.png">-->
	        		{{if coverImage}}
	        		<img class="mui-media-object mui-pull-left moreCompany-img" src="${coverImage}">
	        		{{else}}
	        		<img class="mui-media-object mui-pull-left moreCompany-img" src="../images/icon_blank.png" style="max-width: 100%; max-height: 75px;">
	        		{{/if}}
    	            <div class="mui-media-body">
    	                ${name}
    	                <p class="mui-ellipsis">${remark}</p>
    	                <div class="mt10">
    	                	{{if price}}
    	                	<span class="newRed mr5">${price.toFixed(2)}</span><span class="color9 f08">${unit}</span>
    	                	{{else}}
    	                	<span class="newRed mr5">0.00</span><span class="color9 f08">${unit}</span>
    	                	{{/if}}
    	                </div>
    	            </div>
    	        </a>
    	    </li>
		</script>
		
		<script type="text/javascript">
			mui.init();
			mui('.mui-scroll-wrapper').scroll({
				deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});
			
				var shopId= -1;
				mui.plusReady(function(){
					var wv = plus.webview.currentWebview();
					var _type = wv.type;	//1工装；2家装；3家政；4生活;5美食；6有钱
					shopId = wv.shopId;
//					console.log(_type);
					if(_type==4){	//生活类详情没有“服务预约”
						document.querySelector('#nav').classList.add('mui-hidden');
						document.querySelector('.mui-scroll-wrapper').style.bottom = '0px';
					}
					
					var shopParam = [{
						key:'shopId',
						value:shopId
					}]
					fjNetwork.get('shop/detail.json',shopParam,function(data){
//						console.log(JSON.stringify(data));
						//图片轮播
						var photoList = data.photoList;
						$('#sliderTmpl').tmpl(photoList,{
							hasImg:function(){
								if(photoList.length>0){
									return true;
								}else{
									return false;
								}
							}
						}).appendTo('#swiperWrap');
						var swiperHeight = $(window).width()/16*9;
						var mySwiper = new Swiper ('.swiper-container', {
						    direction: 'horizontal',
						    loop: true,
						    autoplay:4000,
						    autoplayDisableOnInteraction : false,	//false：用户操作后自动不会停止
						    // 如果需要分页器
						    pagination: '.swiper-pagination',
						  });
						  //设置轮播图片宽高比例  16:9
							var imgObj = $('#swiperWrap img');
							var RATE = parseFloat(9/16);	//常量，图片框比例
							imgObj.each(function(){
								$(this).load(function(){	//图片加载成功后执行
									var rate = parseFloat($(this).height()/$(this).width());
			//							console.log(rate);
									if(rate<RATE){		//高度不够
										$(this).css('height',swiperHeight);
										$(this).css('width',$(this).height()/rate);
									}else{				//宽度不够
										$(this).css('width',$(window).width());
										$(this).css('height',$(this).width()*rate);
									}
									if($(this).width()>$(window).width()){
										var marginLeft = parseInt(-($(this).width()-$(window).width())*0.5);
										$(this).css('margin-left',marginLeft);
									}
									if($(this).height()>swiperHeight){
										var marginTop = parseInt(-($(this).height()-swiperHeight)*0.5);
										$(this).css('margin-top',marginTop);
									}
								});
							});
							
							//查看房源相册
							document.querySelector('#swiperWrap').addEventListener('tap',function(){
								openFileWindowWithPage('..','house_photolist',{
									photoList:photoList
								});
							});
							
							//商家信息
							var shop = data.shop;
							$('#shopDetailTmpl').tmpl(shop).appendTo('#shopDetailbox');
							
							//拨打商家电话
							$('#telephone').on('click',function(){
								var phone = $(this).find('span').html();
//								console.log(phone);
								var btnArray = ['拨打', '取消'];
								mui.confirm('是否拨打' + phone + '?', '提示', btnArray, function(e) {
									if(e.index == 0) {
										plus.device.dial(phone, false);
									}
								});
							});
							
							var latitude = shop.latitude;
							var longitude = shop.longitude;
							//查看商家地图
							$('#shopMap').on('click',function(){
								openFileWindowWithPage('..','fj_house_map',{
									longitude:longitude,
									latitude:latitude,
									buildingName:shop.name
								})
							});
							
							//商家推荐的商品
							var shopgoodParam = [{
								key:'shopId',
								value:shop.id
							},{
								key:'page',
								value:1
							},{
								key:'rows',
								value:20
							}];
							fjNetwork.get('shop/goods/list.json',shopgoodParam,function(data){
//								console.log(JSON.stringify(data));
								var goodrows = data.rows;
								$('#shopgoodTmpl').tmpl(goodrows).appendTo('#shopgoodList');
								
							},function(msg){
								mui.toast(msg);
							});
							
							if(_type==6){	//有钱
								//预约按钮
								document.querySelector('#yuyue').addEventListener('tap',function(){
									if(shop.shopStatusName=='停业'){
										mui.toast('很抱歉，该商家已停业');
										return false;
									}else{
										openWindowWithPage('finance_appraisal',{
											type:_type,
											shopId:shopId
										});
									}
									
								});
							}else{
								//预约按钮
								document.querySelector('#yuyue').addEventListener('tap',function(){
									if(shop.shopStatusName=='停业'){
										mui.toast('很抱歉，该商家已停业');
										return false;
									}else{
										openWindowWithPage('company_appraisal',{
											type:_type,
											shopId:shopId
										});
									}
									
								});
							}
							
			//分享
			document.querySelector('#shareHouse').addEventListener('tap',function(){
//				console.log(houseTitle);
				var userInfo = common.myStorage.getItem('userInfo');
				var ids = [{
                    id: "weixin", 
                    ex: "WXSceneSession"  /*微信好友*/
                }, {
                    id: "weixin",
                    ex: "WXSceneTimeline" /*微信朋友圈*/
                }
//              , {
//                  id: "qq"   /*QQ好友*/
//              }
                ],
                bts = [{
                    title: "发送给微信好友"
                }, {
                    title: "分享到微信朋友圈"
                }
//              , {
//                  title: "分享到QQ"
//              }
                ];
	            plus.nativeUI.actionSheet({
	                    cancel: "取消",
	                    buttons: bts
	                },
	                function(e) {
	                    var i = e.index;
	                    if (i > 0) {
	                        shareAction(ids[i - 1].id, ids[i - 1].ex,shopId,_type,userInfo,shop.name);
	                    }
	                }
	            );
			});
						
					},function(msg){
						mui.toast(msg);
					});
					
							
									
					$('#shopgoodList').on('click','li',function(){
						var goodsId = $(this).data('goodsid');
						console.log(goodsId);
						openWindowWithPage('company_photoBig',{
							goodsId:goodsId
						});
					});
					
					
					
			
			
			/*更新分享服务*/
			updateSerivces();
			
			});	//plusready()
				
				
				
			/**
         * 分享操作
         */
        function shareAction(id, ex,shopId,kind,userInfo,houseTitle) {
            var s = null;
            if (!id || !(s = shares[id])) {
                outLine("无效的分享服务！");
                return;
            }
            if (s.authenticated) {
                outSet("---已授权---");
                shareMessage(s, ex,shopId,kind,userInfo,houseTitle);
            } else {
                outSet("---未授权---");
                s.authorize(function() {
                    shareMessage(s, ex,shopId,kind,userInfo,houseTitle);
                }, function(e) {
                    outLine("认证授权失败");
                });
            }
        }
        /**
         * 发送分享消息
         */
        function shareMessage(s, ex, shopId,kind,userInfo,houseTitle) {
        	
            var msg = {
                content: '分享-鑫在线',
                href: 'http://www.xinzhongzheng.com/mobile/share_new_business?shopId='+shopId,
                title: houseTitle,
                content: '房产 装修 家政 生活',
                thumbs: ['images/logo512x512.png'],
                pictures: ['images/logo512x512.png'],
                extra: {
                    scene: ex
                }
            };
            s.send(msg, function() {
                outLine("分享成功!");
                
                //登录状态下 分享成功增加积分
                if(userInfo){
                	shareSuccess(userInfo);
                }
                
            }, function(e) {
                outLine("分享失败!");
            });
        }
        /**
         * 更新分享服务
         */
        function updateSerivces() {
            plus.share.getServices(function(s) {
                shares = {};
                for (var i in s) {
                    var t = s[i];
                    shares[t.id] = t;
                }
                outSet("获取分享服务列表成功");
            }, function(e) {
                outSet("获取分享服务列表失败：" + e.message);
            });
        }
        // 控制台输出日志
        function outSet(msg) {
            console.log(msg);
        }
        // 界面弹出吐司提示
        function outLine(msg) {
            mui.toast(msg);
        }
        /*分享成功*/
       function shareSuccess(userInfo){
//	       	console.log(userInfo.clientId);
	       	var shareParam = [{
	        	key:'clientId',
	        	value:userInfo.clientId
	        }]
	        fjNetwork.post('fjzx/client/add-app-share-integral.json',shareParam,function(data){
//	        	console.log(JSON.stringify(data));
	        });
       }
		</script>
		
	</body>

</html>